<!DOCTYPE html>
<html class="loginHtml">
<head>
    <meta charset="utf-8">
    <title>商户工作台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/common/css/common.css">
<style>
.loginBody form.layui-form {
    box-shadow: 0 0 50px #01AAED;
}
.loginBody .layui-btn-normal{
    background: #01AAED;
}
.loginBody .layui-form-label i{
    color:#01AAED;
}
</style>
</head>

<body class="loginBody">
    <form class="layui-form layui-form-pane">
        <h3 style=";font-weight: 600;line-height:60px;text-align:center">商户工作台</h3>
        <div class="layui-form-item">
            <div class="layui-inline input-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                <div class="layui-input-inline " style="">
                    <input type="text" name="username" placeholder="商户名" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline input-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                <div class="layui-input-inline " style="">
                    <input type="password" name="password" placeholder="密码" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips">
                </div>
            </div>
        </div>
        <div class="layui-form-item captcha_pan" {if ($loginError < 3)}style="display:none;"{/if} >
            <div class="layui-inline input-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                <div class="layui-input-inline">
                    <input type="text" name="captcha" data-num="{$loginError}" class="layui-input" placeholder="验证码" lay-verify="captch" lay-verType="tips" style="width:130px;display:inline-block">
                    <a  class="captcha"><img  height="38" width="100"  alt="验证码" src="{:captcha_src()}" id="captchaPic" onclick="changeCaptcha(this)"></a>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn layui-block layui-btn-fluid layui-btn-normal"  lay-filter="login" lay-submit>登录</button>
        </div>
        <div class="layui-form-item layui-row">
            <a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
            <a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
            <a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
        </div>
    </form>
    <script src="/static/js/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer
                errNum = {$loginError} 
            $ = layui.jquery;
            //验证规则
            form.verify({
                captch: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(errNum >=3 && value.length == 0) return '验证码必填';
                    console.log(errNum);
                }
            }); 

            //登录按钮
            form.on("submit(login)", function (data) {
                var data = data.field
                    ,that = $(this)
                    ,text = that.text();
                that.removeClass('layui-btn-normal').addClass('layui-btn-disabled').prop('disabled', true).text('提交中...');
                $.post('doLogin', data, function (res) {
                    if (res.code == 1) {
                        that.text(res.msg)
                        location.replace(res.url)
                        window.location.href = res.data;
                    } else {
                        that.text(res.msg).prop('disabled', false).removeClass('layui-btn-normal layui-btn-disabled').addClass('layui-btn-danger');
                        setTimeout(function(){
                            that.removeClass('layui-btn-disabled layui-btn-danger').addClass('layui-btn-normal').text(text);
                        }, 1500);
                        errNum = res.data.service_login_error_num;
                        res.data.service_login_error_num >=3 && $('.captcha_pan').show();
                        $("#captchaPic").click();
                    }
                }, 'json');
                return false;
            });

            //表单输入效果
            $(".loginBody .input-item input").click(function (e) {
                e.stopPropagation();
            })
            $(".loginBody .input-item input").focus(function () {
                let _tip_txt = $(this).attr('placeholder');
                let _tip_pan = $(this).parent().find('.tip');
                _tip_pan.length > 0 ? _tip_pan.show() : $(this).parent().prepend('<span class="tip">' + _tip_txt + '</span>');
                $(this).parent().parent().addClass("layui-input-focus");
            })
            $(".loginBody .input-item input").blur(function () {
                let _tip_pan = $(this).parent().find('.tip');
                _tip_pan.hide();
                $(this).parent().parent().removeClass("layui-input-focus");
            })
           
        })
        function changeCaptcha(obj) {
            $(obj).attr('src', $(obj).attr('src') + '?t=' + Math.random(100000000, 999999999));
        }
    </script>
</body>

</html>